<template>
  <uni-nav-bar title="商品详情" left-icon="arrowleft" @clickLeft="back()"/>
  <view style="height: 20px"></view>
  <view>
    <uni-card :isShadow="true" title="" mode="basic" extra="" @click="clickCard" class="card">
      <view>
        <view style="height: 350rpx;">
          <view style="height: 10px"></view>
          <image style="height: 100%;border-radius: 30px;" mode="aspectFill" :src="food.productAvatar"/>
        </view>
        <view class="content-title">
          <text>{{ food.productName }}</text>
        </view>
        <view class="content-box">
          <text>产品描述</text>
        </view>
        <view class="content-box-text">
          <text>{{ food.productDetail }}</text>
        </view>
        <view class="content-box">
          <text>商品分类</text>
        </view>
        <view class="content-box-sort">
          <text>{{ food.productSort }}</text>
        </view>

      </view>
    </uni-card>
    <button class="addButton" @click="addShop()">加入购物车</button>
  </view>
</template>

<script>
import Footer from '@/component/footer/footer.vue'

export default {
  components: {
    Footer,
  },
  data() {
    return {
      foodId: "",
      food: [],
    };
  },
  methods: {
    back() {
      // console.log("点击了返回方法")
      uni.navigateBack({
        delta: 1
      });
    },
    clickCard() {
      uni.showToast({
        title: '点击卡片',
        icon: 'none'
      });
    },
    addFoot() {
      uni.request({
        url: "http://localhost:9999/nbb/FootPrints/addFootPrints",
        header: {
          'Authorization': uni.getStorageSync('Authorization'),
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'POST',
        data: {
          userId: uni.getStorageSync('userId'),
          productId: this.foodId,
        },
        success: (res) => {
          console.log(res)
          if (res.data.code == 0) {
            // console.log("调用加入足迹成功");
          } else {
            // console.log("调用加入足迹失败");
            // console.log(res.data);
          }
        },
        fail() {
          // console.log("调用加入足迹失败");
        }
      })
    },
    addShop() {
      // console.log("加入购物车方法")
      uni.request({
        url: "http://localhost:9999/nbb/Shop/insectShopCard",
        header: {
          'Authorization': uni.getStorageSync('Authorization'),
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'POST',
        data: {
          userId: uni.getStorageSync('userId'),
          productId: this.foodId,
        },
        success: (res) => {
          console.log(res)
          if (res.data.code == 0) {
            // console.log("调用加入购物车成功");
            uni.showToast({
              title: "加入购物车成功"
            })
          } else {
            // console.log("调用加入购物车失败");
            // console.log(res.data);
          }
        },
        fail() {
          // console.log("请求life失败");
        }
      })
    }
  },
  onLoad() {
    console.log("aaa")
    this.foodId = this.$route.query.id;
    uni.request({
      url: "http://localhost:9999/nbb/Product/getAllProductDetail",
      header: {
        'Authorization': uni.getStorageSync('Authorization'),
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        productId: this.foodId
      },
      success: (res) => {
        if (res.data.code == 200) {
          // console.log("获取具体food");
          this.food = res.data.data
          // console.log(this.food)
          this.addFoot()
        } else {
          // console.log("获取分类失败");
          // console.log(res.data);
        }
      },
      fail() {
        console.log("获取分类失败");
      }
    })
  }
};
</script>
<style>
body{
/*background: #F3F3F3 ;*/
}

::v-deep .uni-nav-bar-text {
  font-size: 20px;

}

.card {
  border-radius: 20px;
  box-shadow: 10px 10px darkgrey;
}

.content-title {
  font-size: 28px;
  text-align: center;
  margin: 20px auto;
  color: black;
  padding-top: 10px;
}

.content-box {
  color: coral;
  font-size: 20px;
  margin-bottom: 10px;
}

.content-box-text {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 16px;
}

.content-box-sort {
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.addButton {
  color: white;
  font-size: 20px;
  font-weight: bolder;
  margin-top: 140px;
  width: 90%;
  background-color: #f399a9;
  border-radius: 20px;
}
</style>